{extend name="common/common" /}

{block name="style"}
<link rel="stylesheet" href="__JS__/plugins/zTree/zTreeStyle.css" type="text/css">
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>角色列表</h5>
        </div>
        <div class="ibox-content">
            <div class="form-group clearfix col-sm-1">
                {if authCheck('role/roleadd')}
                <a href="{:url('role/roleAdd')}"><button class="btn btn-outline btn-primary" type="button">添加角色</button></a>
                {/if}
            </div>
            <!--搜索框开始-->
            <form id='commentForm' role="form" method="post" class="form-inline pull-right">
                <div class="content clearfix m-b">
                    <div class="form-group">
                        <label>管理员名称：</label>
                        <input type="text" class="form-control" id="rolename" name="rolename">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" type="button" style="margin-top:5px" id="search"><strong>搜 索</strong>
                        </button>
                    </div>
                </div>
            </form>
            <!--搜索框结束-->

            <div class="example-wrap">
                <div class="example">
                    <table id="cusTable">
                        <thead>
                        <th data-field="id">角色ID</th>
                        <th data-field="department">所属部门</th>
                        <th data-field="role_name">角色名称</th>
                        <th data-field="operate">操作</th>
                        </thead>
                    </table>
                </div>
            </div>
            <!-- End Example Pagination -->
        </div>
    </div>
</div>
<!-- End Panel Other -->
</div>
<!-- 角色分配操作权限 -->
<div class="zTreeDemoBackground left" style="display: none" id="role">
    <input type="hidden" id="nodeid">
    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-2">
            <ul id="treeType" class="ztree"></ul>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-4" style="margin-bottom: 15px">
            <input type="button" value="确认分配" class="btn btn-primary" id="postform"/>
        </div>
    </div>
</div>

<!-- 角色分配可视权限 -->
<div style="display: none; padding: 15px;" id="can_see">
    <form id="can_see_form" class="layui-form layui-form-pane" action="">
        <ul>
            <li>
                <label><input type="radio" name="type" value="0" />仅自己</label>
            </li>
            <li>
                <label><input type="radio" name="type" value="1" />所属部门</label>
            </li>
            <li>
                <label><input type="radio" name="type" value="2" />所属部门及子部门</label>
            </li>
            <li>
                <label><input type="radio" name="type" value="3" />所有</label>
            </li>
        </ul>
    </form>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    zNodes = '';
</script>
<script type="text/javascript" src="__JS__/plugins/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="__JS__/plugins/zTree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="__JS__/plugins/zTree/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript">
    function initTable() {
        //先销毁表格
        $('#cusTable').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#cusTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "{:url('role/index')}", //获取数据的地址
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            pageSize: 10,  //每页显示的记录数
            pageNumber:1, //当前第几页
            pageList: [5, 10, 15, 20, 25],  //记录数可选列表
            sidePagination: "server", //表示服务端请求
            paginationFirstText: "首页",
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            paginationLastText: "尾页",
            queryParamsType : "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    searchText:$('#rolename').val()
                };
                return param;
            },
            onLoadSuccess: function(res){  //加载成功时执行
                if(111 == res.code){
                    window.location.reload();
                }
                layer.msg("加载成功", {time : 1000});
            },
            onLoadError: function(){  //加载失败时执行
                layer.msg("加载数据失败");
            }
        });
    }

    $(document).ready(function () {
        //调用函数，初始化表格
        initTable();

        //当点击查询按钮的时候执行
        $("#search").bind("click", initTable);

    });

    function roleDel(id){
        layer.confirm('确认删除此角色?', {icon: 3, title:'提示'}, function(index){
            //do something
            $.getJSON("{:url('role/roleDel')}", {'id' : id}, function(res){
                if(1 == res.code){
                    layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                        initTable();
                    });
                }else if(111 == res.code){
                    window.location.reload();
                }else{
                    layer.alert(res.msg, {title: '友情提示', icon: 2});
                }
            });

            layer.close(index);
        })

    }
    var index = '';
    var index2 = '';
    //分配权限
    function giveQx(id){
        $("#nodeid").val(id);
        //加载层
        index2 = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

        // 获取权限信息
        $.getJSON("{:url('role/giveAccess')}", {'type' : 'get', 'id' : id}, function(res){
            layer.close(index2);
            if(1 == res.code){
                zNodes = JSON.parse(res.data);  //将字符串转换成obj

                //页面层
                index = layer.open({
                    type: 1,
                    area:['350px', '400px'],
                    title:'分配操作权限',
                    skin: 'layui-layer-demo', //加上边框
                    content: $('#role')
                });

                //设置zetree
                var setting = {
                    check:{
                        enable:true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };

                $.fn.zTree.init($("#treeType"), setting, zNodes);
                var zTree = $.fn.zTree.getZTreeObj("treeType");
                zTree.expandAll(true);

            }else if(111 == res.code){
                window.location.reload();
            }else{
                layer.alert(res.msg, {title: '友情提示', icon: 2});
            }

        });
    }

    //分配权限
    function giveQx2(id){
        $.getJSON("{:url('role/getCanseeType')}",{'id':id}, function(result){
            var aInput = $('#can_see_form input[name="type"]');
            for(var i=0;i<aInput.length;i++){
                if(aInput[i].value == result){
                    aInput[i].checked = true;
                }
            }
			layui.use(['form'], function(){
				var form = layui.form;
				form.render();
			});
        });

        layer.open({
            type:1,
            title:"分配可视权限",
            area:['350px','300px'],
            content:$('#can_see'),
            btn:['确定','取消'],
            yes:function(){
                var type = $('#can_see_form').serialize();
                $.post('giveSee',{type:type,role_id:id},function(res){
                    response(res);
                });
            },
            btn2:function(){
                layer.closeAll();
            }
        })
    }


    $(function(){
        //确认分配权限
        $("#postform").on('click',function(){
            var zTree = $.fn.zTree.getZTreeObj("treeType");
            var nodes = zTree.getCheckedNodes(true);
            var NodeString = '';
            $.each(nodes, function (n, value) {
                if(n>0){
                    NodeString += ',';
                }
                NodeString += value.id;
            });
            var id = $("#nodeid").val();
            //写入库
            $.post("{:url('role/giveAccess')}", {'type' : 'give', 'id' : id, 'rule' : NodeString}, function(res){
                layer.close(index);
                if(1 == res.code){
                    layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                        initTable();
                    });
                }else if(111 == res.code){
                    window.location.reload();
                }else{
                    layer.alert(res.msg, {title: '友情提示', icon: 2});
                }

            }, 'json')
        })
    })
</script>
{/block}
